import React from 'react';
import { Table } from 'antd';
import { Icon } from '@/pages/Recruitment/components';

const statusObj = {
    1: '待处理',
    2: '已完成'
};
export default function AdministrativeTable({ value, onChange, setOperateChangeFlag, type }) {
    const onItemClick = record => {
        const item = value.find(v => v.id === record.id);
        if (record.status === 1) {
            item.status = 2;
        } else {
            item.status = 1;
        }
        if (onChange) {
            onChange(value);
        }
        setOperateChangeFlag(true);
    };
    const getOperateBtns = record => (
        <Icon
            type={record.status === 1 ? 'group_add-icon' : 'process_common_time_icon1'}
            title={record.status === 1 ? '标为已完成' : '标为待处理'}
            onClick={() => onItemClick(record)}
        />
    );

    const renderStatus = val => <span style={{ opacity: val === 1 ? 1 : 0.4 }}>{statusObj[val]}</span>;
    let arr = [];
    if (type !== 'detail') {
        arr = [
            {
                title: '操作',
                dataIndex: 'work',
                key: 'work',
                width: 200,
                align: 'center',
                render: (_, record) => getOperateBtns(record)
            }
        ];
    }
    const columns = React.useMemo(
        () => [
            {
                title: '交接事项',
                dataIndex: 'handoverMatterName',
                key: 'handoverMatterName'
            },
            {
                title: '说明',
                dataIndex: 'handoverMatterDesc',
                key: 'handoverMatterDesc'
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',

                render: val =>
                    type === 'detail' ? (
                        <span style={{ opacity: val === 1 ? 1 : 0.4 }}>{val === 1 ? '待处理' : '已完成'}</span>
                    ) : (
                        renderStatus(val)
                    )
            },
            ...arr
        ],
        []
    );
    return (
        <div style={{ marginBottom: 16 }}>
            <Table columns={columns} dataSource={value} pagination={false} />
        </div>
    );
}
